<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>客户端检测</title>
	</head>

	<body>
		<h1>客户端检测</h1>
		<p>1能力检测</p><br />
		<div>能力检测又称为特性检测，检测的目标不是识别特定的浏览器，而是识别浏览器的能力。能力检测不必估计特定的浏览器，只需要确定当前的浏览器是否支持特定的能力，就可以给出可行的解决方案。</div>

		<p>2怪癖检测</p>
		<div>与能力检测类似，怪癖检测的目标是识别浏览器的特殊行为。但是与能力检测确认浏览器支持什么能力不同，怪癖检测是想知道浏览器存在什么缺陷（bug）. bug一般属于浏览器独有，在大多数版本的浏览器被修复。
		</div>
		<p>用户代理检测</p>
		<div>
			用户代理检测 通过检测用户代理字符串来识别浏览器。用户代理字符串中包含大量与浏览器有关的信息，包括浏览器、平台、操作系统及浏览器版本。 用户代理字符串有过一段相当长的发展历史，在此期间，浏览器提供商视图通过在用户代理字符串总添加一些欺骗性信息，欺骗网站详细自己的浏览器是另外一种浏览器。 用户代理检测需要特殊的技巧，特别是要注意Opera会隐瞒其用户代理字符串的情况。即便如此，通过用户代理字符串仍然能够检测出浏览器所用的呈现引擎以及所在的平台，包括移动设备和游戏系统。 在每一次HTTP请求过程中，用户代理字符串是作为响应首部发送的，而且该字符串可以通过Javascript的navigator.userAgent属性访问。 在服务器端，通过检测用户代理字符串来确定用户使用的浏览器是一种常用而且广为接受的做法。而在客户端，用户代理检测一般被当作一种万不得已的做法， 其优先级排在能力检测和怪癖检测之后。

		</div>
		<span>浏览器代理字符串</span><br />
	</body>
	<script>
		//1能力检测
		var width = window.innerWidth; //非ie浏览器
		alert(typeof width); //number
		if(typeof width != 'number') { //ie浏览器使用document
			if(document.compatMode == 'CSS1Compat') {
				width = document.documentElement.clientWidth;

			} else {
				width = document.body.clientWidth; //非标准模式使用body
			}
		}
		alert(width);
		//2怪癖检测bug
		var box = {
			toString: function() {}, //因为和默认toString重名，ie不打印

			toString2: function() {}
		}
		for(var o in box) {
			alert(o);

		}
		//3用户代理字符串
		document.write(navigator.userAgent); //得到用户代理字符串   ，使用这个可以检测浏览器

		//浏览器检测

		var client = function() { //创建一个对象
			// 呈现引擎
			var engine = {
				ie: 0,
				gecko: 0,
				webkit: 0,
				khtml: 0,
				opera: 0,

				// 完整的版本号
				ver: null
			};

			// 浏览器
			var browser = {
				// 主要浏览器
				ie: 0,
				firefox: 0,
				safari: 0,
				konq: 0,
				opera: 0,
				chrome: 0,

				// 具体的版本号
				ver: null,
				//浏览器名称
				name:'unKnow'
			};
			//浏览器系统
		var system ={
			win:false,  //window
			mac:false,   //苹果
			x11:false,    //linux
			//通用名称
			sysname:'unKnow'
		}
		
			//核心检测区

			
			var ua = navigator.userAgent;// 检测呈现引擎和浏览器
			var xpn = navigator.platform;//检测系统
			if(xpn.indexOf('Win')==0){
				system.win =true;    //确定浏览器
				system.sysname ='Windows;'  //输出的字符串
			}else if(xpn.indexOf('Mac')==0){
				system.max =true;
				system.sysname ='Machintosh';
				
			}else if(xpn=='X11'||xpn.indexOf('Linux')==0){
				system.x11 = true;
				system.sysname ='Linux';
			}
			
			
			
			if(window.opera) { //表示确定opera的引擎（opera浏览器）
				engine.ver = browser.ver = window.opera.version();
				engine.opera = browser.opera = parseFloat(engine.ver);
				browser.name='opera';
			} else if(/AppleWebKit\/(\S+)/.test(ua)) { //表示确定是vebkit引擎（谷歌和苹果浏览器）
				engine.ver = RegExp["$1"];
				engine.webkit = parseFloat(engine.ver);

				// 确定是Chrome还是Safari
				if(/Chrome\/(\S+)/.test(ua)) {
					browser.ver = RegExp["$1"];
					browser.chrome = parseFloat(engine.ver);
					browser.name='Chrome';
				} else if(/Version\/(S+)/.test(ua)) {
					browser.ver = RegExp["$1"];
					browser.safari = parseFloat(browser.ver);
					browser.name='Safari';
				} else {

					// 近似地确定版本号
					var safariVersion = 1;
					if(engine.Webkit < 100) {
						safariVersion = 1;
					} else if(engine.webkit < 312) {
						safariVersion = 1.2;
					} else if(engine.webkit < 412) {
						safariVersion = 1.3;
					} else {
						safariVersion = 2;
					}

					browser.safari = browser.ver = safariVersion;
				}
			} else if(/KHTML\/(S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
				engine.ver = browser.ver = RegExp["$1"];
				engine.khtml = browser.kong = parseFloat(engine.ver);
			} else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
				engine.ver = RegExp["$1"];
				engine.gecko = parseFloat(engine.ver);

				// 确定是不是firefox
				if(/Firefox\/(S+)/.test(ua)) {
					browser.ver = RegExp["$1"];
					browser.firefox = parseFloat(browser.ver);
					browser.name='firefox';
				}
			} else if(/MSIE ([^;]+)/.test(ua)) {
				engine.ver = browser.ver = RegExp["$1"];
				engine.ie = browser.ie = parseFloat(engine.ver);
				browser.name='IE';

			}

			// 检测浏览器
			browser.ie = engine.ie;
			browser.opera = engine.opera;

			// 返回这些对象
			return {
				engine: engine,
				browser: browser,
				system:system
			}
		}(); //自我执行并赋值

		console.log(client.engine);
		console.log(client.browser);
 		alert('当前系统'+client.system.sysname+'目前使用的浏览器是'+client.browser.name+'版本号为:'+client.browser.ver);
 




		//Tangram 检测浏览器源码
		/**
		 * 声明baidu包
		 */
		var baidu = baidu || {
			version: "1-3-2"
		}; // meizz 20100513 将 guid 升级成 \x06
		baidu.guid = "$BAIDU$"; //提出guid，防止修改window[undefined] 20100504 berg

		/**
		 * meizz 2010/02/04
		 * 顶级域名 baidu 有可能被闭包劫持，而需要页面级唯一信息时需要用到下面这个对象
		 */

		window[baidu.guid] = window[baidu.guid] || {};

		/**
		 * 声明baidu.browser包
		 */
		baidu.browser = baidu.browser || {};

		/**
		 * 判断是否为isGecko
		 */
		baidu.browser.isGecko = /gecko/i.test(navigator.userAgent) && !/like gecko/i.test(navigator.userAgent);

		/**
		 * 判断是否为isWebkit
		 */
		baidu.browser.isWebkit = /webkit/i.test(navigator.userAgent);

		/**
		 * 判断是否为标准模式
		 */
		baidu.browser.isStrict = document.compatMode == "CSS1Compat";

		/**
		 * 判断是否为safari浏览器
		 */
		if((/(\d+\.\d)(\.\d)?\s+safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent))) {
			baidu.browser.safari = parseFloat(RegExp['\x241']);
		}

		/**
		 * 判断是否为opera浏览器
		 */
		if(/opera\/(\d+\.\d)/i.test(navigator.userAgent)) {
			baidu.browser.opera = parseFloat(RegExp['\x241']);
		}

		/**
		 * 判断是否为chrome浏览器
		 */
		if(/chrome\/(\d+\.\d)/i.test(navigator.userAgent)) {
			baidu.browser.chrome = parseFloat(RegExp['\x241']);
		}

		/**
		 * 判断是否为ie浏览器
		 */
		if(/msie (\d+\.\d)/i.test(navigator.userAgent)) {
			baidu.ie = baidu.browser.ie = document.documentMode || parseFloat(RegExp['\x241']);
		}

		/**
		 * 判断是否为firefox浏览器
		 */
		if(/firefox\/(\d+\.\d)/i.test(navigator.userAgent)) {
			baidu.browser.firefox = parseFloat(RegExp['\x241']);
			// '\x241' 是八进制表示法 '\x24' 对应字符 '$' ，所以 '\x241' 等同于 '$1'
		}
	</script>

</html>